<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>登录弹出层</title>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/imt/js/jquery-3.1.0.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/imt/js/system.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/imt/layui/layui.js"></script>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/imt/layui/css/layui.css"
	media="all">
<link rel="stylesheet" 
	href="${pageContext.request.contextPath}/imt/css/login.css" />
</head>
<style>
td {
	padding: 5px;
}
</style>

<!-- 旧版 -->
<!-- <body>
	<div
		style="position: relative; top: 30%; transform: translateY(20%); width: 300px; height: 200px; margin: 0 auto;">
		<form class="layui-form" id="loginForm" action="">
			<table style="margin: 0 auto; width: 100%;">
				<tr>
					<td>用户名</td>
					<td><input type="text" class="layui-input" name="userName"
						id="username" /></td>
				</tr>
				<tr>
					<td>密码</td>
					<td><input type="password" class="layui-input" name="userPwd"
						id="password" /></td>
				</tr>
			</table>
		</form>
		<div class="layui-btn layui-btn-small layui-btn-normal"
			style="width: 300px; margin-top: 10px;" onclick="login()">登录</div>
	</div>
</body> -->


<!-- 新版 -->
<body class="beg-login-bg">
	<div class="beg-login-box">
		<header>
			<h1>后台登录</h1>
		</header>
		<div class="beg-login-main">
			<form class="layui-form" id="loginForm" action=""><input name="__RequestVerificationToken" type="hidden" value="fkfh8D89BFqTdrE2iiSdG_L781RSRtdWOH411poVUWhxzA5MzI8es07g6KPYQh9Log-xf84pIR2RIAEkOokZL3Ee3UKmX0Jc8bW8jOdhqo81" />
				<div class="layui-form-item">
					<label class="beg-login-icon">
                       <i class="layui-icon">&#xe612;</i>
                   </label>
					<input type="text" name="userName" id="username" lay-verify="userName" autocomplete="off" placeholder="这里输入登录名" class="layui-input" value="lk" >
				</div>
				<div class="layui-form-item">
					<label class="beg-login-icon">
                       <i class="layui-icon">&#xe642;</i>
                   </label>
					<input type="password" name="userPwd" id="password" lay-verify="password" autocomplete="off" placeholder="这里输入密码" class="layui-input" value="12345" >
				</div>
				<div class="layui-form-item">
					<div class="beg-pull-left beg-login-remember">
						<label>记住帐号？</label>
						<input type="checkbox" name="rememberMe" value="true" lay-skin="switch" checked title="记住帐号">
					</div>
					<div class="beg-pull-right">
						<div class="layui-btn layui-btn-primary" onclick="login()">
                           <i class="layui-icon">&#xe650;</i> 登录
                       	</div>
					</div>
					<div class="beg-clear"></div>
				</div>
			</form>
		</div>
		<footer>
			<p>Beginner © www.zhengjinfan.cn</p>
		</footer>
	</div>
</body>

<script>
	$(document).ready(function() {
		// 监听键盘回车事件
		$("#password").keydown(function(event) {
			if (event.keyCode == 13) {
				if (document.activeElement.id == "password") {
					login();
				}
				return false;
			}
		});
	});

	layui.use([ 'element', 'layer' ], function() {
		var $ = layui.jquery;
		var element = layui.element;
		var layer = layui.layer; //独立版的layer无需执行这一句
	});

	layui.use(['form'], function() {
		var	form = layui.form;
	});
	
	function login() {
		if(verifyPassword($("#password").val())){
			var loginForm = new FormData($("#loginForm")[0]);
			var url = "${pageContext.request.contextPath}/login";
			$.ajax({
				url : url,
				type : 'POST',
				data : loginForm,// 
				async : false,/*  */
				contentType : false, /*  */
				processData : false,
				dataType : 'text',
				success : function(data) {
					if (data == "OK") {
						var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
						parent.layer.close(index); //再执行关闭   
						parent.tools.refresh(); // 外部调用，如子页面
					} else {
						layer.alert('登录失败！请核对用户名或密码！' + data, {
							closeBtn : 0,
							anim : 6,
							icon : 5
						});
					}
				},
				error : function(data) {
					layer.alert('登录出现异常，请稍后再试！' + JSON.stringify(data), {
						closeBtn : 0,
						anim : 6,
						icon : 5
					});
				}
			});
		}
	}
	
	/**
	 * 验证密码输入格式
	 * @param obj
	 * @returns {Boolean}
	 */
	function verifyPassword(obj){
	    if(/^[a-z0-9]{5,18}$/.test(obj)){
	        return true;
	    }else{
	    	layer.alert('密码格式不正确！', {
				closeBtn : 0,
				anim : 6,
				icon : 5
			});
	    }
	}
</script>
</html>